<template>
  <!-- 移除外部容器，直接用背景层 -->
  <div class="auth-bg" :style="{ backgroundImage: `url(${backgroundImage})` }">
    <div class="auth-card">
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    backgroundImage: {
      type: String,
      default: require('@/assets/login-bg.jpg') 
    }
  }
}
</script>

<style scoped>
/* 关键点：全屏固定定位 + 隐藏滚动条 */
.auth-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  overflow: hidden; /* 禁止滚动 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-card {
  width: 90%;
  max-width: 420px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 响应式调整（直接写在这里，不再分散） */
@media (max-width: 480px) {
  .auth-card {
    padding: 1.5rem;
    width: 95%;
  }
}
</style>